既存のHTMLサイトは、ページの追加・更新をするにあたって、タグや内容などを全て自分で打ち込む必要があります。
また、更新したファイルをFTPでアップロードしないとサイトに反映することができます。
一方、Wordpressだとタグの打ち込みが必要なく、さらに更新もボタン一つで可能です。管理が簡単なのが特徴です。
そのため、既存のHTMLサイト(静的HTMLサイト)をWordpressに移行して管理したいと思うことも多いはずです。
このページでは、既存のHTMLのサイトを移行するための大まかな流れを紹介していきます。
移行方法は、既存のHTMLサイトをスクレイピングで必要な部分を抜き取りつつWordpressのテーブルにアップデートしていきます。※PHPなどの知識がある程度必要です。
Contents
HTMLサイトをWordpressに移行するための手順既存のイメージ画像をWP側にアップロードWordPressテーマの選択プラグインの選択HTMLサイトの内容をスクレイピングして保存する【補足】画像IDを取得する方法【補足】ページ内で利用しているJavascriptを確認する【補足】既存サイトとWordpressのURLの違いに注意【補足】ドメイン関連【補足】htaccessの設定変更についてインデックス登録開始(Wordpress設定画面から)Search Console設定Googleアナリティクス設定Googleアドセンス設定【まとめ】HTMLサイトをWordpressに移行するための手順HTMLサイトをWordpressに移行するための手順HTMLサイトをWordpressに移行する場合は下記のような作業が発生します。
移行作業手順
既存のイメージ画像をWP側にアップロードWordPressテーマの選択プラグインの選択HTMLサイトの内容をスクレイピングして保存するツールでドメイン一括置換ドメイン設定変更(Wordpress設定画面から)ドメイン更新(必要に応じて)htaccessのドメイン関連変更(必要に応じて)インデックス登録開始(Wordpress設定画面から)Search Console設定Googleアナリティクス設定Googleアドセンス設定「スクレイピングで既存の記事をWPに保存」までが事前に準備する作業です。
「ツールでドメイン一括置換」からは、リリース当日から行う作業です。
それぞれの手順の内容を紹介します。
既存のイメージ画像をWP側にアップロードHTMLサイトの場合は、イメージ画像ディレクトリーを作成してまとめている場合が多いと思います。
https://hoge.com/img/xxxxxWordPressの場合は設定を変更しない限り、uploadディレクトリの下に日付ごとにフォルダがつくられ、その中に画像が保存されます。
今までの画像を日付ごとに振り分けるのは不可能なので、下記の場所にまとめてアップロードして、画像URLを変更します。
/wp-content/uploads/例えば、HTMLサイトで下記の画像を使っていたとします。
WordPress側では、下記のように絶対パスで置換します。
WordPress側に移行後にURLを置換するのであれば、「Search Regex」というプラグインを使って置換ができます。
もしくは、後述する「Search Replace DB」でも変更できます。
WordPressテーマの選択WordPressでは、どんなサイトでもテーマを使っています。
テーマを使うことで、サイトのデザインを統一させることができます。
「どのテーマを利用するか」「オリジナルのテーマを作成するか」「無料テーマをそのまま使うか」を決める必要があります。
無料テーマを使う場合であっても、デザイン性を求めるのであれば、ほぼ開発が必要で、テーマ開発が一番時間がかかります。
メモ
オリジナルテーマにしたい場合は、トップページ、一覧ページ、記事ページ、404ページ、検索ページなどのテンプレートがあるのでその修正などが必要になります。
有料であれば、開発しなくてもよいものが多いです(必要に応じて修正が必要になる場合があります)。
時間をかけたくない場合は、有料テーマがおすすめです。
有料Wordpressテーマ・THE THOR(個人・企業どちらも)・STREETIST(個人・企業どちらも)・Emanon(個人・企業どちらも)・「スワロー」(個人・企業どちらも)・「STORK19」(個人・企業どちらも)・「ストーク」(個人・企業どちらも)・「RUMBLE」(個人向け)・「ONE」(個人向け)・「FAKE」(企業向け)・AFFINGER(個人向け)・SWELL(個人向け)無料Wordpressテーマ・「BlogPress」(無料)・「Cocoon」(無料)テーマが決まったら、Wordpressにインストールして操作感をチェックしましょう。
テーマにはカスタマイズなどで変更できる項目があり、基本的に有料テーマは変更できるカスタマイズ内容が多くあります。
早めに確認することで、開発しなくても変更できる部分を把握できます。
プラグインの選択WordPressには、プラグインを使って便利な機能を実現できます。
ただし、機能がテーマについているものもあったりするので、テーマでないものを入れるようにしましょう。
Smush:画像最適化・Lazyload処理Table of Contents Plus:目次プラグインWP Revisions Control:リビジョンを制限できるWordPress Popular Posts:人気記事一覧contact form7:フォーム作成Shortcoder:ショートコード作成Yoast SEO:title、description設定・Googleアナリティクス設定・XMLサイトマップXML Sitemaps:XMLサイトマップClassic Editor:グーテンベルグが使いにくい場合WP Crontrol:WPクーロン操作SmushはLazyloadができるのでかなりおすすめです。
テーマでGoogleアナリティクスなどの設定ができない場合は、Yoast SEOまたはAll in One SEOをいれましょう。
もし、XML Sitemaps(Googleに渡すXMLサイトマップ)だけでよい場合もあります。テーマでどこまで対応しているか確認が必要です。
HTMLサイトの内容をスクレイピングして保存するいよいよ本題になります。
HTMLサイトが数ページ規模であれば、コピペですみますが、数十ページ以上あるサイトになるとコピペもかなり大変です。
その場合は、既存サイトのHTMLをスクレイピングして、Wordpressに保存する方法があります。
スクレイピングには、GoogleのphpQueryというライブラリを利用できます。
参考
・phpquery(外部リンク)※遷移先で「phpQuery-0.9.5.386-onefile.zip」をダウンロードします。
phpQueryを使うと、「CSSのidやclass」を指定してHTMLを抽出することができます。逆にいうと、抜き出す部分に下記のようにidやclassの指定がないと抜き出せません。
・・・phpQueryの設定方法から使い方は下記の記事が参考になります。
PHPでスクレイピングする方法:phpQueryの設定方法から使い方疑問 PHPで簡単にスクレイピングする方法はある? PHPを使って特定のURLをスクレイピングをするなら、Googleが提供しているphpQueryを使うと便利です。 指定したURLで使われている「i ...
phpQueryでは抽出したデータは、下記のWordpress関数を使ってDBに登録します。
wp_insert_post()update_post_meta()wp_insert_post()で更新する主な項目
wp_insert_post()では、